<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1>{{msg}}</h1>
      <!-- 数学运算 -->
      <h1>{{num+1}}</h1>
      <!-- 字符串的拼接 -->
      <h1>{{msg+'123'}}</h1>
      <!-- 三元表达式 -->
      <h1>{{num>=20? '可以看一些两个人演的电影了':'未成年'}}</h1>
      <!-- 调用方法 -->
      <h1>{{msg2.split('').reverse().join('-')}}</h1>
      <!-- 逻辑分支 不允许-->
      <!-- <h1>{{if(num){}}}}</h1> -->
      <!-- 不允许这样写，因为MVVM模型会造成无限更新 -->
      <!-- <h1>{{num ++}}</h1> -->
    </div>
  </body>
</html>
<script src="./vue.js"></script>
<script>
  const vm = new Vue({
    el: "#app",
    data: {
      msg: "vue",
      num: 20,
      msg2: "可达鸭，杰尼龟",
    },
  });
</script>
